<template>
  <div>
    <div v-if="lineSelected">被选中的 Geometry : {{ lineSelected.getId() }}</div>
    <button @click="queryChina">查询中国</button>
    <button @click="queryFujian">查询福建行政区</button>
    <button @click="getFujianGeoJSON">查询福建行政区edit</button>
    <button @click="select">选择</button>
    <button @click="add">新增</button>

    <button v-if="lineSelected" @click="startEdit">开始编辑</button>
    <button v-if="lineSelected" @click="endEdit">结束编辑</button>
    <!--    <button @click="update">编辑</button>-->
    <!--    <button @click="del">删除</button>-->
    <button @click="save">保存</button>
    <!--   moving  事件    [102.5455703858988, 33.88046049146122]  [112.89619, 27.81579]   [118.066667, 24.4632276]-->
    <ct-map class="my-map"
            :map-id="mapId"
            crs="gaode"
            :ct-zoom="14"
            @mapInitCompleted="getMapInfo"
            :ct-center="[118.066667, 24.4632276]"
            :mapListens="['zoomend','resize','click']"
            @zoomend="getZoomend"
            @resize="unknownEvent"
            @click="moving">
      <!--城市导航-->
      <ct-city-select></ct-city-select>
      <!-- 默认为 自定义 的控件 ，显示在地图内 -->
      <button @click="add">新增</button>
      <button @click="add">新增</button>
      <button @click="add">新增</button>
<!--      <ct-map-track></ct-map-track>-->
      <ct-map-marker :center-and-zoom="{center:true}" :point="{x:113.50,y:27.22}"></ct-map-marker>


      <!--      <ct-map-info-window :point="sourcePoint"-->
      <!--                          :dom-element="domEle"-->
      <!--                          :options="optIW"-->
      <!--                          @infoWindowCompleted="infoWindowCompleted"-->
      <!--                          @hide="hide">-->
      <!--      </ct-map-info-window>-->

      <!--      <ct-map-cluster-marker :points="multiMarker1000"-->
      <!--                             :base-symbol="img"-->
      <!--                             :listen-events="['click']"-->
      <!--                             :cluster-symbol="clusterSymbol0"-->
      <!--                             style-tag="common"-->
      <!--                             @infoWindowHide="infoWindowHide"-->
      <!--                             @markerClick="clusterMarkerClick"-->
      <!--                             @clusterMarkers="clusterMarkers"-->
      <!--                             @clusterLayer="getClusterLayer"-->
      <!--                             @click="clusterClick"-->
      <!--                             @dblclick="dblclick">-->
      <!--      </ct-map-cluster-marker>-->


      <!--      <ct-map-marker :point="{x:sourcePoint[0],y: sourcePoint[1] }"-->
      <!--                     :center-and-zoom="{center:true}"-->
      <!--                     @markerCompleted="markerCompleted">-->
      <!--      </ct-map-marker>-->

      <!--     轨迹 -->
      <!--      <ct-map-track-->
      <!--        v-if="true"-->
      <!--        :show-info-window="true"-->
      <!--        :point-of-track="track0"-->
      <!--        :action="'play'"-->
      <!--        :play-speed="parseInt('1000')"-->
      <!--        :marker-listens-enable="'click'"-->
      <!--        :offset-index="0"-->
      <!--      >-->
      <!--        &lt;!&ndash;       @markerClick="markerClick"-->
      <!--                @playStatus="playStatus"-->
      <!--                @nullException="nullException"-->
      <!--                @multiLineGeometry="getMultiLineGeometry"-->
      <!--                @updateSlotDom="updateInfoWindowDom"-->
      <!--                @notAllow="notAllow"    &ndash;&gt;-->
      <!--        &lt;!&ndash;        播放轨迹时候 的 信息窗口（并不是 点击事件的窗口）        &ndash;&gt;-->
      <!--        <div slot="trackMarkerInfoWindow">-->
      <!--          <div style="width: 200px;">-->
      <!--            <el-row>车牌:{{ '黑Axxx' }}</el-row>-->
      <!--            <el-row>速度:{{ '120' }} km/h</el-row>-->
      <!--            <el-row>里程:{{ '200' }} km</el-row>-->
      <!--            <el-row>时间:{{ '2022/02/01' }}</el-row>-->
      <!--            <el-row>状态:{{ 'xxxxxx' }}</el-row>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </ct-map-track>-->

      <!--      <ct-map-layer-switch></ct-map-layer-switch>-->
      <!--      <ct-city-select :default-city="cityZZ"></ct-city-select>-->

      <!--      <ct-map-multi-marker :points="multiMarker1000"-->
      <!--                           :listen-events="['click']"-->
      <!--                           @click="multiMarker">-->
      <!--      </ct-map-multi-marker>-->

      <!--                  <ct-map-line v-if="line222.length > 0" :lines="line222"-->
      <!--                               @multiLineStringCompleted="multiLineStringCompleted"></ct-map-line>-->
      <!--      <ct-map-circle :circles="circles" @circleCompleted="circleCompleted"></ct-map-circle>-->

      <!--      <ct-map-polygon :polygon-point-group="polygon" @polygonCompleted="polygonCompleted"></ct-map-polygon>-->
      <!--      <ct-city-select @coordinate-event="getXy"></ct-city-select>-->

      <!--      <ct-map-draw-tool :draw-symbol="linkSymbol"></ct-map-draw-tool>-->
      <!--      <ct-map-marker-->
      <!--        :point="[112.7696,22.490536]"-->
      <!--        :center-and-zoom="{center:true,zoom:14}"-->
      <!--      >-->
      <!--      </ct-map-marker>-->

    </ct-map>
    <div class="d3" ref="info3">
      <div>{{ tableArr == null ? 0 : tableArr.length + ' 行 ' }}</div>
      <div v-for="(item,index) in tableArr">
        {{ item }}
      </div>
    </div>
    <div class="d3" ref="info2">
      123
    </div>
  </div>
</template>

<script>
import ctMap from "./components/mainmap/ctMap";
import ctMapMarker from "./components/marker/ctMapMarker";
import ctMapMultiMarker from "./components/multimarker/ctMapMultiMarker";
import ctMapPolygon from "./components/polygon/ctMapPolygon";
import ctMapLine from "./components/line/ctMapLine";
import ctMapLink from "./components/link/ctMapLink";
import ctMapCircle from "./components/circle/ctMapCircle";
import ctMapClusterMarker from "./components/cluster/ctMapClusterMarker";
import ctMapDrawTool from "./components/draw/ctMapDrawTool";
import ctMapHeat from "./components/heat/ctMapHeat";
import ctMapTrack from "./components/track/ctMapTrack";
import myPng from './assets/logo.png'
import carPng from './assets/car.png'
import Measure from "./components/measuretool/ctMeasure";
import CtMeasure from "./components/measuretool/ctMeasure";
import CtMapLayerSwitch from "./components/layerSwitch/ctMapLayerSwitch";
import cluster0 from './components/cluster/cluster0.png'
import cluster1 from './components/cluster/cluster1.png'
import cluster2 from './components/cluster/cluster2.png'
import cluster3 from './components/cluster/cluster3.png'
import cluster4 from './components/cluster/cluster4.png'
import ctCitySelect from "./components/citySelect";
import ctMapInfoWindow from './components/infoWindow/ctMapInfoWindow'
import {createXTMapAndLayer} from "./api/layerConvert";
import * as maptalks from "maptalks";
import {GeoJSON} from "maptalks";


export default {
  name: 'app',
  components: {
    ctMapInfoWindow,
    ctCitySelect,
    cluster0,
    cluster1,
    cluster2,
    cluster3,
    cluster4,
    CtMapLayerSwitch,
    CtMeasure,
    Measure,
    ctMap,
    ctMapTrack,
    ctMapHeat,
    ctMapDrawTool,
    ctMapClusterMarker,
    ctMapCircle,
    ctMapMarker,
    ctMapMultiMarker,
    ctMapPolygon,
    ctMapLine,
    ctMapLink
  },
  data() {
    return {
      optIW: {animationOnHide: true, animationDuration: 0, dy: -45,},
      domEle: null,
      cityZZ: {name: '亳州', coordinate: {x: 115.787928, y: 33.871211}},
      ii: 0,
      pausePlay: '',
      currentPoint: false,
      show: false,
      mapInfo: null,
      distance: null,
      input: '',
      htmlZ: '<div style=\"color:red\">zzz</div>',
      mapId: 'MyMap',
      multiMarker1000: [],
      heat1000: [],
      from: [126.58803, 45.76],
      to: [126.58658, 45.75905],
      line: [
        [126.58803, 45.76],
        [126.58658, 45.75905],
        [126.59664, 45.75984]
      ],
      line222: [
        {
          lineId: 'line1',
          lType: 'line',
          point: [
            [126.58803, 45.78],
            [126.58858, 45.75805],
            [126.59864, 45.75884]
          ],
          lSymbol: {
            symbol: {
              lineColor: '#ee4916',
              lineWidth: 3,
            },
          }
        },
        {
          lineId: 'line2',
          lType: 'line',
          point: [
            [126.58803, 45.76],
            [126.58658, 45.75905],
            [126.59664, 45.75984]
          ],
          lSymbol: null
        },
      ],
      p: [
        [
          [126.58803, 45.76],
          [126.58658, 45.75905],
          [126.59664, 45.75984]
        ]
      ],
      box: [
        {
          'markerType': 'square',
          'markerFill': '#000',
          'markerLineColor': '#b4b3b3',
          'markerLineWidth': 2,
          'markerWidth': 15,
          'markerHeight': 15,
          'markerDx': 20
        },
        {
          'markerType': 'x',
          'markerFill': 'rgb(135,196,240)',
          'markerFillOpacity': 1,
          'markerLineColor': '#34495e',
          'markerLineWidth': 3,
          'markerLineOpacity': 1,
          'markerLineDasharray': [],
          'markerWidth': 15,
          'markerHeight': 15,
          'markerDx': 20,
          'markerDy': 0,
          'markerOpacity': 1
        }
      ]
      ,
      clusterSymbol0: {
        'noClusterWithOneMarker': true,
        'maxClusterZoom': 17,
        'drawClusterText': true,
        'geometryEvents': true,
        'single': true
      },
      clusterSymbol1: {
        drawClusterText: true,
        geometryEvents: true,
        single: true,
        maxClusterRadius: 100,
        noClusterWithOneMarker: true,
        maxClusterZoom: 17,
        symbol: [
          {
            'markerType': 'ellipse',
            'markerFill': '#fff',
            'markerFillOpacity': 1,
            'markerWidth': 20,
            'markerHeight': 20,
            'markerLineWidth': 0
          },
          {
            'markerType': 'ellipse',
            'markerFill': '#1bc8ff',
            'markerFillOpacity': 0.9,
            'markerWidth': 55,
            'markerHeight': 55,
            'markerLineWidth': 0
          },
          {
            'markerType': 'ellipse',
            'markerFill': '#0096cd',
            'markerFillOpacity': 0.8,
            'markerWidth': 91,
            'markerHeight': 91,
            'markerLineWidth': 0
          },
          {
            'markerType': 'ellipse',
            'markerFill': '#0096cd',
            'markerFillOpacity': 0.3,
            'markerWidth': 130,
            'markerHeight': 130,
            'markerLineWidth': 0
          },
          {
            'markerType': 'ellipse',
            'markerFill': '#0096cd',
            'markerFillOpacity': 0.2,
            'markerWidth': 172,
            'markerHeight': 172,
            'markerLineWidth': 0
          }
        ],
        textSymbol: {
          textFaceName: 'monospace',
          textSize: 14,
          textDx: 0,
          textDy: {property: 'count', type: 'interval', stops: [[0, -25], [9, -26], [99, -30]]},
        },
      },
      iconTextSymbol: {
        markerPath: 'M8 23l0 0 0 0 0 0 0 0 0 0c-4,-5 -8,-10 -8,-14 0,-5 4,-9 8,-9l0 0 0 0c4,0 8,4 8,9 0,4 -4,9 -8,14z M5,9 a3,3 0,1,0,0,-0.9Z',
        markerPathWidth: 80,
        markerPathHeight: 80,
      },
      img: {
        markerFile: myPng,
        markerWidth: 30, // 图片大小
        markerHeight: 30, // 图片大小
        markerOpacity: 1, // 图片透明度
        markerRotation: 0, // 逆时针度数 ，12点为 0 度，把图片向左旋转的度数
        markerDx: 7,
        markerDy: 2
      },
      label: {
        text: '粤J59003',
        textSymbol: {
          'textFaceName': 'monospace',
          'textHaloFill': 'rgba(52,73,94,0)',
          'textHaloRadius': 4,
          'textSize': 12,
          'textWeight': 'bold',
          'textVerticalAlignment': 'top',
          textDx: 50,
          textDy: 7
        },
        listens: ['click', 'dblclick']
      },
      delSymbol: [{
        'markerType': 'square',
        'markerFill': 'rgba(0,0,0,0)',
        'markerLineColor': '#e70b0b',
        'markerLineWidth': 2,
        'markerWidth': 10,
        'markerHeight': 10,
        'markerDx': 15
      }, {
        'markerType': 'x',
        'markerFill': 'rgb(135,196,240)',
        'markerFillOpacity': 1,
        'markerLineColor': '#e70b0b',
        'markerLineWidth': 3,
        'markerLineOpacity': 1,
        'markerLineDasharray': [],
        'markerWidth': 10,
        'markerHeight': 10,
        'markerDx': 15,
        'markerDy': 0,
        'markerOpacity': 1
      }],
      imgAndText: {
        markerFile: carPng,
        markerWidth: 30, // 图片大小
        markerHeight: 30, // 图片大小
        markerOpacity: 1, // 图片透明度
        textFaceName: 'sans-serif',
        textName: '粤J59003',
        // textFill: 'rgb(230 46 156)',
        // textHorizontalAlignment: 'bottom',
        textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
        textSize: 12,
        textDx: 35,
        textDy: -10,
        markerRotation: 90
      },
      imgAndText2: {
        markerFile: carPng,
        markerWidth: 30, // 图片大小
        markerHeight: 30, // 图片大小
        markerOpacity: 1, // 图片透明度
        textFaceName: 'sans-serif',
        textName: '粤J66666',
        // textFill: 'rgb(230 46 156)',
        // textHorizontalAlignment: 'bottom',
        textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
        textSize: 12,
        textDx: 35,
        textDy: -10,
        markerRotation: 135
      },
      xxxx: {
        textFaceName: 'sans-serif',
        textName: 'null',
        textFill: 'rgb(230 46 156)',
        textHorizontalAlignment: 'top',
        textSize: 20
      },
      polygon: [
        {
          polygonId: 'p1',
          pType: 'type1',
          pSymbol: {
            'lineColor': '#d3156b',
            'lineWidth': 2,
            'polygonFill': 'rgb(135,196,240)',
            'polygonOpacity': 0.6
          },
          point: [[126.58803, 45.78], [126.58858, 45.75805], [126.59864, 45.75884]]
        },
        {
          polygonId: 'p2',
          pType: 'type1',
          pSymbol: null,
          point: [[126.58703, 45.78], [126.58758, 45.75805], [126.59764, 45.75884]]
        }
      ],
      circles: [
        {
          circleId: 'c1',
          cType: 'type1',
          point: [126.58803, 45.78],
          radius: 200,
          cSymbol: {
            'lineColor': '#d3156b',
            'lineWidth': 2,
            'polygonFill': 'rgb(135,196,240)',
            'polygonOpacity': 0.6
          }
        },
        {
          circleId: 'c2',
          cType: 'type1',
          radius: 500,
          point: [126.58758, 45.75805],
          pSymbol: null,
        }
      ],
      polygonSymbol: {
        lineColor: '#34495e',
        lineWidth: 4,
        polygonFill: 'rgb(135,196,240)', // '#1bbc9b'  'rgb(135,196,240)'
        polygonOpacity: 0.5,
        textName: 'polygon',
        textFill: 'rgb(230 46 156)',
      },
      circleSymbol: {
        textName: 'circle-center',
        lineColor: 'grey',
        lineWidth: 3,
        polygonFill: '#1bbc9b',
        polygonOpacity: 0.5,
      },
      linkSymbol: {
        arrowStyle: null, // arrow-style : now we only have classic
        arrowPlacement: 'vertex-last', // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
        visible: true,
        editable: true,
        cursor: null,
        shadowBlur: 0,
        shadowColor: 'black',
        draggable: false,
        dragShadow: false, // display a shadow during dragging
        drawOnAxis: null, // force dragging stick on a axis, can be: x, y
        symbol: {
          lineColor: '#dc11a2',
          lineWidth: 2,
        }
      },
      status: '',
      sourcePoint: [126.59664, 45.75984],
      targetPointGD: [126.6025515425557, 45.76175086817122],
      targetPointBD: [126.60893083977908, 45.76813284311729],
      point: [],
      track: [
        {
          x: 126.57287, y: 45.71889, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '粤J59003',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 45,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.58018, y: 45.71436, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '66666',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 90,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {x: 126.58851, y: 45.71073, z: 1, markerSymbol: this.imgAndText, infoWindow: {}},
        {
          x: 126.59183, y: 45.70763, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.59455, y: 45.70578, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.59855, y: 45.70376, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.60255, y: 45.70203, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.60671, y: 45.70091, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.61352, y: 45.70233, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.61862, y: 45.70346, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.62202, y: 45.70382, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
        {
          x: 126.62177,
          y: 45.70555,
          z: 1,
          markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          },
          infoWindow: {}
        },
        {
          x: 126.62109, y: 45.70847, z: 1, markerSymbol: {
            markerFile: carPng,
            markerWidth: 30, // 图片大小
            markerHeight: 30, // 图片大小
            markerOpacity: 1, // 图片透明度
            textFaceName: 'sans-serif',
            textName: '7777',
            // textFill: 'rgb(230 46 156)',
            // textHorizontalAlignment: 'bottom',
            textPlacement: 'vertex-last', // point vertex line vertex-first vertex-last
            textSize: 12,
            textDx: 35,
            textDy: -10,
            markerRotation: 135,
            markerDx: 0,
            markerDy: 12,
          }, infoWindow: {}
        },
      ],
      startIndex: 0,
      track0: [
        {x: 126.58018, y: 45.71436},
        {x: 126.58851, y: 45.71073},
        {x: 126.59183, y: 45.70763},
        {x: 126.59455, y: 45.70578},
        {x: 126.59855, y: 45.70376},
        {x: 126.60255, y: 45.70203},
        {x: 126.60671, y: 45.7009},
        {x: 126.61352, y: 45.70233},
        {x: 126.61862, y: 45.70346},
        {x: 126.62202, y: 45.70382},
        {x: 126.62177, y: 45.70555},
        {x: 126.62109, y: 45.70847},
      ],
      track1: [
        [126.58018, 45.71436],
        [126.58851, 45.71073],
        [126.59183, 45.70763],
        [126.59455, 45.70578],
        [126.59855, 45.70376],
        [126.60255, 45.70203],
        [126.60671, 45.7009],
        [126.61352, 45.70233],
        [126.61862, 45.70346],
        [126.62202, 45.70382],
        [126.62177, 45.70555],
        [126.62109, 45.70847],
      ],
      track2: [
        [126.58851, 45.71073],
        [126.59183, 45.70763],
        [126.59455, 45.70578],
        [126.59855, 45.70376],
        [126.60255, 45.70203],
        [126.60671, 45.7009],
        [126.61352, 45.70233],
        [126.61862, 45.70346],
        [126.62202, 45.70382],
        [126.62177, 45.70555],
        [126.62109, 45.70847],
      ],
      pointType: 'Baidu',
      speed: 1000,
      trackz: [],
      markerPoint: null,
      clusterLayer: null,
      tableArr: null,
      fujian_4326Layer: null,
      fujian_edit_layer: null,
      layerBase4326: null,
      china4326Layer: null,
      lineSelected: null,
    }
  },
  methods: {
    infoWindowCompleted(infoWindow) {
      console.log('infoWindowCompleted , infoWindow = ', infoWindow)
    },
    hide(event) {
      console.log('infoWindow hide = ', event)
    },
    getXy(data) {
      console.warn(data)
    },
    uuu() {
      console.log(' 点击 点击点击点击点击 ')
    },
    updateSlotDom(truck) {
      this.track1 = truck
    },
    markerClick(marker, data) {
      console.log('x', data.x)
      const vue = this
      let info3 = vue.$refs.info3
      console.log('dom ', info3)
      marker.setInfoWindow({
        title: '',
        autoPan: false,
        width: 400,
        custom: false,
        autoOpenOn: 'click',
        // autoCloseOn: 'click',
        content: info3,
      })
      marker.openInfoWindow();
    },
    infoWindowHide(info_window, userMarkerData) {
      console.log('*** infoWindowHide = ', info_window, userMarkerData)
    },
    clusterMarkerClick(marker, userMarkerData) {
      console.log('*** clusterMarkerClick = ', marker, userMarkerData)
      marker.getInfoWindow().setContent('<h3>456</h3>')
    },
    clusterMarkers(markers) {
      console.log('clusterMarkers===', markers)
    },
    getClusterLayer(clusterLayer) {
      this.clusterLayer = clusterLayer
    },
    clusterClick(e, markerArr) {
      if (!markerArr.center) {
        return
      }
      let arr = []
      markerArr.children.forEach(function (marker) {
        arr.push(marker.mpType)
      })
      this.tableArr = arr
      this.$nextTick(function () {
        this.domEle = this.$refs.info3
        this.sourcePoint = [markerArr.center.x, markerArr.center.y]
      })
    },
    polygonCompleted(map) {
      console.log('map ', map)
    },
    circleCompleted(map) {
      console.log('map ', map)
    },
    projectionChange(param) {
      console.log('控件参考已改变', param)
    },
    dblclick(e, p) {
      if (p.center) {
        this.mapInfo.Map.setZoom(this.mapInfo.Map.getZoom() + 2)
        console.log('双击666', p)
      }
    },
    multiMarker(marker) {
      console.log('123333')
    },
    getZoomend(allInfo, zoomFrom, zoomTo) {
      // console.log(zoomFrom, zoomTo)
    },
    getClick(param, clickPoint) {
      this.markerPoint = clickPoint
      console.log('click')
    },
    moving(zz) {
      console.log('当前坐标 = ',zz.coordinate.toArray())
    },
    unknownEvent(size) {

    },
    markerCompleted(marker, label, xMarker) {
      console.log('单点 渲染完成 ', marker, label, xMarker)
    },
    multiLineStringCompleted(map) {
      console.log('map ', map)
    },
    queryChina() {
      if (!this.china4326Layer) {
        this.china4326Layer = createXTMapAndLayer();
        this.mapInfo.Map.addLayer(this.china4326Layer)
      }
    },
    query() {
      let _this = this
      if (!_this.fujian_4326Layer) {
        _this.fujian_4326Layer = new maptalks.VectorLayer('roadLayer', null, {zIndex: 1}).addTo(_this.mapInfo.Map);
        let request = new XMLHttpRequest();
        request.open('GET', 'http://82.156.217.213:8080/geoserver/pgsql_EPSG4326/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pgsql_EPSG4326%3Asheng&maxFeatures=1&outputFormat=application%2Fjson');
        request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        request.onreadystatechange = function () {
          if (request.readyState === 4 && request.status === 200) {
            let info = request.responseText;
            const geometries = GeoJSON.toGeometry(info, geometry => {
            });
            _this.fujian_4326Layer.addGeometry(geometries, false)
          }
        }
        request.send()
      }
    },
    queryFujian() {
      let _this = this
      if (!_this.fujian_4326Layer) {
        _this.fujian_4326Layer = new maptalks.WMSTileLayer('fujian_4326Layer', {
          // renderer: 'canvas',
          'urlTemplate': 'http://82.156.217.213:8080/geoserver/pgsql_EPSG4326/wms',
          'crs': 'EPSG:4326',
          'layers': 'pgsql_EPSG4326:fujian_line', // pgsql_EPSG4326:fujian_line   pgsql_EPSG4326:sheng
          'styles': '',
          'version': '1.1.0',
          'format': 'image/png',
          'transparent': true,
          'uppercase': true,
          'REQUEST': 'GetMap',
          'exceptions': 'application/vnd.ogc.se_inimage'
        }).addTo(_this.mapInfo.Map)
      }
    },
    select() {

    },
    add() {


    },
    update() {
      let _this = this
    },
    del() {

    },
    save() {

    },
    startEdit() {
      this.lineSelected.startEdit()
    },
    endEdit() {
      let listens = this.lineSelected.listens('editend');
      console.log('监听 个数 ：', listens)
      this.lineSelected.endEdit()
    },
    getFujianGeoJSON() {
      let _this = this
      if (!_this.fujian_edit_layer) {
        _this.fujian_edit_layer = new maptalks.VectorLayer('fujian_edit').addTo(_this.mapInfo.Map);
      }
      let request = new XMLHttpRequest();
      request.open('GET', 'http://82.156.217.213:8080/geoserver/pgsql_EPSG4326/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pgsql_EPSG4326%3Afujian_line&outputFormat=application%2Fjson');  // &maxFeatures=50
      request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          let info = request.responseText;
          const geometries = GeoJSON.toGeometry(info, geometry => {

            if (geometry.getId() === 'fujian_line.176') {
              geometry.config({
                symbol: {
                  'lineColor': '#e00d3f',
                  'lineWidth': 3
                }
              })
              geometry.on('click editend', function (p) {
                let target = p.target; // MultiGeometry
                _this.lineSelected = target
                if (p.type === 'click') {
                  console.log('line click ')
                  geometry.updateSymbol({
                    'lineColor': '#0d8fe0',
                    'lineWidth': 5
                  })
                } else if (p.type === 'editend') {
                  console.log('line editend ', target)
                }
              })
            }
          });
          _this.fujian_edit_layer.addGeometry(geometries, false)
        }
      }
      request.send()
    },
    doUpdate() {

    },
    mapClick(data) {
      console.log('地图点击事件，', data)
    },
    addPoint() {
      this.currentPoint = !this.currentPoint
    },
    getMapInfo(mapInfo) {
      this.mapInfo = mapInfo
      let ctMapUtils = this.mapInfo.CtMapUtils;
      let map = this.mapInfo.Map;
      let measureUtil = ctMapUtils.measureUtil;
      this.distance = measureUtil.ctCreateDistanceTool();
      measureUtil.ctAddToMap(this.distance, map)
      // 测试 切换图层
      // setTimeout(function () {
      //   ctMapUtils.layerSwitch.layerSwitchToGDSatellite(map)
      //   setTimeout(function () {
      //     ctMapUtils.layerSwitch.layerSwitchToGDBase(map)
      //     setTimeout(function () {
      //       ctMapUtils.layerSwitch.layerSwitchToBDBase(map)
      //     },2000)
      //   },2000)
      // }, 2000)
    },
    getDrawGeometry(geometryJson) {
      // console.log('获取用户绘画的几何图形数据', geometryJson)
    },
    mapStatus(data) {
      this.status = data
    },
    mouseClick(data) {
      this.point = data
    },
    createManyPoint() {
      this.multiMarker1000 = []
      for (let i = 0; i < 10000; i += 1) {
        const x = 126.6172 + Math.random() * 0.1 - Math.random() * 0.1;
        const y = 45.78064 + Math.random() * 0.1 - Math.random() * 0.1;
        const obj = {}
        obj.x = x
        obj.y = y
        obj.mpId = i // 用户传入的唯一标识
        obj.mpType = i
        obj.markerSymbol = this.img
        //可以用 给你返回的 所有的 你 放在  setZIndex(zIndex)
        this.multiMarker1000.push(obj);
      }
    },
    createManyHeatPoint() {
      for (let i = 0; i < 1000; i += 1) {
        const x = 126.6172 + Math.random() * 0.1 - Math.random() * 0.1;
        const y = 45.78064 + Math.random() * 0.1 - Math.random() * 0.1;
        this.heat1000.push([x, y, 0.1]);
      }
    },
    pause(action) {
      this.pausePlay = action
    },
    updataSymbol() {
      this.imgAndText2 = this.img
    },
    setPointType(pointType) {
      this.pointType = pointType
    },
    playSpeed(type) {
      if (type === 1) {
        this.speed = this.speed - 500
      } else {
        this.speed = this.speed + 500
      }
    },
    addClusterPoint() {
      this.createManyPoint()
    },
    clickItem(index) {
      this.startIndex = index
    }
  },
  mounted() {
    let _this = this
    //dfsdfsdfs
    // this.createManyPoint()
    // _this.$nextTick(function () {
    //   const x = 126.6172 + Math.random() * 0.1 - Math.random() * 0.1;
    //   const y = 45.78064 + Math.random() * 0.1 - Math.random() * 0.1;
    //   _this.domEle = _this.$refs.info2
    //   _this.sourcePoint = [x, y]
    // })
  },
}
</script>

<style scoped>
.my-map {
  height: 900px;
}

.d3 {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

h3 {
  margin: 0;
}
</style>
